@charset "UTF-8";
/*
Author:张禀奇 Description: 搜索栏
*/
@import "../base/_common";
//@import "../components/imageBulletin";

%width{
	min-width:1190px;
	width:100%;
}
%wrap{
	width:1190px;
	margin:0 auto;
}
%clearfix{
	&:after{
		content:".";
		height:0;
		visibility:hidden;
		display:block;
		clear:both;
		font-size:0;
		line-height:0;
	}
	*zoom:1;
}
/* $font-family:'Helvetica Neue', 'Microsoft YaHei',Arial, 'Heiti SC',SimSun; */
$font-family: Helvetica,Arial,"Microsoft YaHei",Heiti,SimSun,sans-serif;
[placeholder]::-webkit-input-placeholder{color:#999}
[placeholder]:-ms-input-placeholder{color:#999}
[placeholder]:-moz-placeholder{color:#999}
[placeholder]::-moz-placeholder{color:#999}
[placeholder]:focus::-webkit-input-placeholder{opacity: 0}
[placeholder]:focus::-moz-placeholder{opacity: 0}
// ::-ms-clear { display: none; }
.placeholdersjs{color:#999;}
$background-color:#f5f5f5;


.site-header{
	@extend %width;
	background-color:#fff;
	position:relative;
	z-index:19;
	.wrap{
		@extend %wrap;
		height: 40px;
		padding: 45px 0;
	}
}
.site-header-bd{
	@extend %clearfix;
	font-size:14px;
	color:#999;
	.site-logo{
		float: left;
		width:230px;
		height:40px;
		text-align: center;
		margin-right: 69px;
	}
	.search-panel{
		float:left;
	}
	.help-tel{
		padding-top:2px;
	}

	.search-box{
		@extend %clearfix;
	}
	.input-container{
		position: relative;
		float: left;
		width:501px;
		height:36px;
		border:2px solid $color-main;
		border-right: 0;
		z-index:10;
		.search-txt{
			display: block;
			width: 461px;
			height: 32px;
			line-height: 32px;
			*height:30px;
			*line-height:30px;
			*background-color:#fff;
			padding:2px 19px 2px 19px;
			border:none;
			font-size: 14px;
			font-family: $font-family;
		}
		.search-txt::-webkit-input-placeholder { font-family: $font-family;}
		.recommend-cont{
			position: absolute;
			right:0;
			top:3px;
			z-index:20;
			a{
				float: left;
				height: 22px;
				line-height: 22px;
				padding: 0 5px;
				margin:4px 5px;
				color:$color-txt-4;
				font-size: 12px;
				background:$color-bg-2;
				max-width: 70px;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    white-space: nowrap;
				&:hover{
					color:$color-hover;
				}
			}
		}
	}
	.search-btn{
		float: left;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color:#fff;
		width: 110px;
		background-color: $color-main;
		border:none;
		font-size: 18px;
		cursor: pointer;
	}
	.search-btn:focus{
		outline: none;
	}
}


/*导航栏*/
.nav-top {
	width: 100%;
	min-width: 1190px;
	background-color: #fff;
	border-bottom: 2px solid $color-border-4;
	height: 36px;
	.dropdown {
		background-color: $color-main;
		position: relative;
		width: 230px;
		height: 36px;
		float: left;
		.hamburger {
			position: absolute;
			top: 12px;
			left: 21px;
			display: block;
			width: 14px;
			height: 12px;
			@include iconItemNoSize($iconsIndex,"icon-2.0-hamburger",indexMaps);
		}
		.index-tit {
			position: absolute;
			top: 7px;
			left: 48px;
			font-size: 16px;
			color: #fff;
		}
		.detail-tit {
			position: absolute;
			top: 7px;
			left: 20px;
			font-size: 16px;
			color: #fff;
		}
		.i-up {
			position: absolute;
			top: 16px;
			right: 17px;
			@include iconItemNoSize($iconsIndex,"icon-2.0-nav-up",indexMaps);
			width: 14px;
			height: 7px;
		}
		.i-down {
			position: absolute;
			top: 16px;
			right: 17px;
			@include iconItemNoSize($iconsIndex,"icon-2.0-nav-down",indexMaps);
			width: 14px;
			height: 7px;
		}
		.extend {
			position: absolute;
			bottom: -2px;
			left: 0;
			height: 2px;
			width: 100%;
		}
	}
	ul {
		float: left;
		position: relative;
		margin-left: 70px;
		height: 36px;
		line-height: 36px;
		li {
			float: left;
			margin-right: 58px;
			a {
				font-size: 18px;
				color: #333;
			}
			a:hover {
				text-decoration: none;
				color: $color-main;
			}
			.icon-tip {
				position: absolute;
				top: 0px;
				right: -23px;
				width: 18px;
				height: 18px;
				@include iconItemNoSize($iconsIndex,"icon-title-tip",indexMaps);
				color: #fff;
				font-size: 12px;
				font-style: normal;
				line-height: 18px;
				text-align: center
			}
		}
		.cur a {
			color: $color-main;
		}
		.icon-tip-box {
			position: relative;
		}
		li:last-child {
			margin-right: 0;
		}
	}
}

/*左边筛选栏*/
.fast-screen-zindex {
	z-index: 100;
}
.fast-screen {
	position: absolute;
	top: -2px;
	border-top: 2px solid $color-border-4;
	left: 0;
	width: 228px;
	height: 444px;
	background-color: #fff;
	overflow: hidden;
	.screen-title {
		color: $color-txt-2;
		font-size: 16px;
		margin-left: 16px;
		margin-top: 13px;
	}
	.screen-brand {
		padding: 12px 0 7px 10px;
		border-bottom: 2px solid #f3f3f3;
		li {
			display: block;
			width: 43px;
			height: 40px;
			float: left;
			border: 1px solid $color-border-3;
			margin-right: 9px;
			margin-bottom: 9px;
			position: relative;
			overflow: hidden;
			a {
				display: block;
				width: 100%;
				height: 100%;
			}
			.import-strip {
				position: absolute;
				bottom: 0;
				width: 45px;
				height: 14px;
				line-height: 14px;
				margin-left: -1px;
				margin-bottom: -1px;
				background-color: $color-main;
				filter: alpha(opacity=50);
				-moz-opacity: 0.5;
				-khtml-opacity: 0.5;
				opacity: 0.5;
				color: #fff;
				text-align: center;
				vertical-align: middle;
				font-size: 12px;
			}
		}
		li:hover {
			border: 1px solid $color-main;
		}
		.selected {
			border: 1px solid $color-main;
		}
		.b-volkswagen {
			/*background: url('#{$imgurl-base}/brand/b-volkswagen.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-volkswagen",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-buick {
			/*background: url('#{$imgurl-base}/brand/b-buick.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-buick",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-skoda {
			/*background: url('#{$imgurl-base}/brand/b-skoda.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-skoda",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-roewe {
			/*background: url('#{$imgurl-base}/brand/b-roewe.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-roewe",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-mg {
			/*background: url('#{$imgurl-base}/brand/b-mg.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-mg",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-WULING {
			/*background: url('#{$imgurl-base}/brand/b-WULING.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-WULING",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-baojun {
			/*background: url('#{$imgurl-base}/brand/b-baojun.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-baojun",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-MAXUS {
			/*background: url('#{$imgurl-base}/brand/b-MAXUS.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-MAXUS",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-chevrolet {
			/*background: url('#{$imgurl-base}/brand/b-chevrolet.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-chevrolet",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-import-volkswagen {
			/*background: url('#{$imgurl-base}/brand/b-volkswagen.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-volkswagen",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-subaru {
			/*background: url('#{$imgurl-base}/brand/b-subaru.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-subaru",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
		.b-cadillac {
			/*background: url('#{$imgurl-base}/brand/b-cadillac.png') no-repeat center;*/
			@include iconItemNoSize($iconsBrand,"b-cadillac",brandMaps);
			margin-left: 6px;
			margin-top: 5px;
		}
	}
	.screen-rank, .screen-price {
		width:223px;
		padding: 12px 0 7px 16px;
		border-bottom: 2px solid #f3f3f3;
		li {
			float: left;
			margin-right: 20px;
			font-size: 12px;
			margin-bottom: 6px;
			a {
				color: $color-txt-2;
				white-space: nowrap;
			}
			a:hover {
				color: $color-hover;
				text-decoration: none;
			}
		}
		.selected a {
			color: $color-hover;
		}
	}
	.screen-price {
		border-bottom: none;
	}
}
.fast-screen-border{
	border-right:1px solid $color-main;
	border-left:1px solid $color-main;
	border-bottom:1px solid $color-main;
}